<template>
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark"
        :style="{ backgroundColor: `rgba(10,38,64, ${opacity})` }">
        <div class="container"><router-link to="/" class="navbar-brand" href="index.html">
                <img style="color: aqua;" :src="logoSvg" alt="" /></router-link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation"><i class="fa-solid fa-bars text-white fs-3"></i></button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mt-2 mt-lg-0">
                    <li class="nav-item"><router-link class="nav-link fw-bold" aria-current="page"
                            to="/">主页</router-link>
                    </li>
                    <li class="nav-item" @click="scrollToAnchor"><a class="nav-link fw-bold" aria-current="page"
                            style="cursor: pointer;">产品</a></li>
                    <li class="nav-item"><a class="nav-link fw-bold" aria-current="page" style="cursor: pointer;"
                            @click="() => {
                                ElMessage.warning('文档建设中');
                            }">文档</a>
                    </li>
                    <li class="nav-item  mt-lg-0 ">

                        <router-link v-if="!userInfo" to="/login"
                            class="nav-link btn btn-light text-black w-md-25 w-50 w-lg-100"
                            aria-current="page">登录</router-link>
                        <el-dropdown v-else size="large">
                            <el-avatar style="cursor: pointer;"
                                :src="userInfo.avatarUrl || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="() => {
                                        router.push('/userinfo')
                                    }">个人资料</el-dropdown-item>
                                    <el-dropdown-item @click="() => {
                                        router.push('/demandinfo')
                                    }">需求进度</el-dropdown-item>
                                    <el-dropdown-item @click="() => {
                                        openEmailClient()
                                    }">联系客服</el-dropdown-item>
                                    <el-dropdown-item>修改密码</el-dropdown-item>
                                    <el-dropdown-item divided @click="() => {
                                        logout()
                                    }">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

</template>

<script setup>
import logoSvg from '@/assets/img/Logo.svg'
import { ref, onMounted, onUnmounted } from 'vue';
import { throttle } from 'lodash';
import { EventBus } from '@/utils/eventBus1.js';
import { useRouter } from 'vue-router';
import { userInfo, checkTokenAndFetchUserInfo } from '@/utils/auth';
import { logout } from '@/utils/auth';
import { ElMessage } from 'element-plus';

const router = useRouter();

const scrollToAnchor = () => {
    EventBus.scrollTo = '#device';
}

const opacity = ref(0);

const handleScroll = () => {
    const scrollTop = window.scrollY;
    const maxScroll = 400; // 调整此值以控制透明度变化范围
    const newOpacity = Math.min(scrollTop / maxScroll, 1);
    opacity.value = newOpacity;
};

const throttledHandleScroll = throttle(handleScroll, 100);



onMounted(async () => {
    await checkTokenAndFetchUserInfo();
    window.addEventListener('scroll', throttledHandleScroll);
});

onUnmounted(() => {
    window.removeEventListener('scroll', throttledHandleScroll);
});

const openEmailClient = () => {
    const email = 'labcore@aliyun.com'; // 替换为你的邮件地址
    const subject = encodeURIComponent('客户支持请求'); // 替换为你的邮件主题
    const body = encodeURIComponent('请详细描述您的问题'); // 替换为你的邮件内容
    window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
}


</script>

<style scoped>
.nav-item:not(:last-child) .nav-link:hover {
    color: #65E4A3 !important;
}

.nav-item:last-child {
    margin-left: 20px;
}

.nav-item:last-child .nav-link:hover {
    background-color: #65E4A3;
    border-color: #65E4A3;
    color: #ffffff !important;
}

.router-link-active {
    color: #65E4A3 !important;
}
</style>